<template>
  <div>
    <div class="eat_body">
      <div class="aside">
        <!-- 侧边导航 -->
        <van-sidebar v-model="activeKey" @change="cliclAside">
          <van-sidebar-item
            v-for="(item,index) in asideList"
            :key="index"
            :title="item.categoryName"
          />
        </van-sidebar>
      </div>
      <!-- 数据遍历 -->
      <div class="eat_content">
        <Goods
          class="list"
          v-for="(item,index) in itemList"
          :key="index"
          :price="item.originPrice"
          :title="item.spuName"
          :imgurl="item.bigImageUrl"
          :addnum="0"
          @oncarts="clickAdd(item)"
          @subcarts="jian(item)"
        ></Goods>
      </div>
    </div>
    <!-- 底部购物车 -->
    <div class="bottom">
      <van-icon
        name="cart-o"
        size="50"
        :badge="$store.state.cartList.length"
        color="orange"
        style="line-height:70px;margin-left:10px"
        @click="showPop"
      />
      <span style="color:#fff;font-size:20px">￥{{total}}</span>
      <span class="qi_song">￥15起送</span>
    </div>
    <!-- 底部弹出层 -->
    <van-popup v-model="show" position="bottom" :style="{height:'40%',borderRadius:'10px 10px 0 0'}">
      <van-card
        v-for="(item,index) in $store.state.cartList"
        :key="index"
        :price="item.goods.originPrice"
        :title="item.goods.spuName"
        :thumb="item.goods.bigImageUrl"
      >
      <template #num>
        <van-stepper v-model="item.num" theme="round" button-size="22" disable-input @change="popclick(item)"/>
      </template>
      </van-card>
    </van-popup>
  </div>
</template>

<script>
import Goods from "../components/GoodsCard";
export default {
  components: {
    Goods,
  },
  data() {
    return {
      asideList: [],
      activeKey: 0,
      itemList: [],
      alllist: [],
      total: 0,
      show: false,
    };
  },
  mounted() {
    this.$axios.get("/shopdetails.json").then((res) => {
      // console.log(res.data[0].data.categoryList)
      this.asideList = res.data[0].data.categoryList;
      // console.log(res.data[0].data.categoryList);
      this.itemList = res.data[0].data.categoryList[0].spuList;
    });
  },
  methods: {
    cliclAside(index) {
      console.log(index);
      this.itemList = [];
      this.itemList = this.asideList[index].spuList;
    },
    allprice() {
      console.log(this.$store.state.cartList)
      this.total = 0;
      this.$store.state.cartList.map((item) => {
        this.total += item.goods.originPrice * item.num;
      });
    },
    clickAdd(goods) {
      this.$store.commit("add", goods);
      this.allprice();
    },
    jian(id) {
      this.$store.commit("sub", id);
      this.allprice();
    },
    showPop() {
      this.show = !this.show;
    },
    popclick(item){
      this.allprice();
    }
  },
};
</script>

<style scoped>
.eat_body {
  width: 100%;
  display: flex;
}
.aside {
  width: 25%;
  height: 592px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.eat_content {
  width: 75%;
  height: 592px;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-left: -10px;
}
.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 70px;
  background: #3b3b3c;
}
.qi_song {
  width: 180px;
  height: 100%;
  position: absolute;
  top: 20px;
  left: 274px;
  display: block;
  color: rgb(223, 223, 223);
  font-size: 20px;
}
.list {
  margin-left: -5px;
}
</style>